<template>
  <el-dialog
    v-model="config.visible"
    :title="title"
    width="600px"
    :append-to-body="true"
  >
    <el-form
      ref="ruleFormRef"
      :model="config.ruleForm"
      :rules="config.rules"
      label-width="100px"
    >
      <el-form-item label="旧密码:" prop="password">
        <el-input
          v-model="config.ruleForm.password"
          show-password
          placeholder="请输入旧密码"
        />
      </el-form-item>
      <el-form-item label="新密码:" prop="newPassword">
        <el-input
          v-model="config.ruleForm.newPassword"
          show-password
          placeholder="请输入新密码"
        />
      </el-form-item>
      <el-form-item label="确认密码:" prop="newPassword2">
        <el-input
          v-model="config.ruleForm.newPassword2"
          show-password
          placeholder="请再次输入新密码"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="config.visible = false">取消</el-button>
      <el-button :loading="config.loading" type="primary" @click="save()">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="Password">
import { reactive, ref, watch } from 'vue'
import md5 from 'js-md5'

const { $api, ElMessage } = window
const config = reactive({
  visible: true,
  loading: false,
  ruleForm: {
    password: '',
    newPassword: '',
    newPassword2: '',
  },
  rules: {
    password: [
      {
        required: true,
        message: '请输入旧密码',
        trigger: 'blur',
      },
    ],
    newPassword: [
      {
        required: true,
        trigger: 'blur',
        validator: (rule: any, value: S, callback: any) => {
          if (!value) return callback(new Error('请输入新密码'))

          if (
            !/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,20}$/.test(
              value,
            )
          ) {
            return callback(
              new Error(
                // '密码必须6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种'
                '密码必须8-20位字母、数字、特殊字符组成',
              ),
            )
          }

          if (value == config.ruleForm.password) {
            return callback(new Error('新密码和旧密码不能一致'))
          }

          callback()
        },
      },
    ],
    newPassword2: [
      {
        required: true,
        trigger: 'blur',
        validator: (rule: any, value: S, callback: any) => {
          if (!value) {
            return callback(new Error('请再次输入新密码'))
          }
          if (value !== config.ruleForm.newPassword) {
            return callback(new Error('两次输入密码不一致'))
          }
          callback()
        },
      },
    ],
  },
})

const props = defineProps({
  title: {
    type: String,
    default: '修改密码',
  },
  form: {
    type: Object,
    default: () => {},
  },
})

watch(
  () => props.form,
  (newV) => {
    config.ruleForm = Object.assign(config.ruleForm, newV)
  },
  { deep: true, immediate: true },
)

const ruleFormRef = ref()
async function save() {
  let valid = await ruleFormRef.value.validate((valid: B) => valid)
  if (!valid) return

  const { password, newPassword } = config.ruleForm

  $api.login
    .changePassword(
      {
        password: md5(password),
        newPassword: md5(newPassword),
      },
      config,
    )
    .then(() => {
      config.visible = false
      ElMessage.success('修改成功')
    })
    .catch(() => {
      config.loading = false
      // ElMessage.error('修改失败')
    })
}
</script>
